<template>
  <view>
    <view class="content">
      <!-- <view class="content_key"> -->
      <!-- 	<view class="content_fl">
					<text class="text">* </text>
					<text>省/市/区</text>
				</view> -->
      <!-- <view class="content_fr">
					<pickerAddress @change="change"><text>{{receiveZone}}</text></pickerAddress>
					<image src="../../static/iocn11.png"></image>
				</view> -->
      <!-- </view> -->
      <view class="content_key">
        <view class="content_fl">
          <text class="text">* </text>
          <text class="text1">详细地址</text>
        </view>
        <view class="content_fr"
          ><input
            type="text"
            v-model="receiveAddress"
            placeholder="请选择详细地址"
            @click="getRegeo()"
        /></view>
      </view>
      <view class="content_key">
        <view class="content_fl">
          <text class="text">* </text>
          <text class="text1">卸货人</text>
        </view>
        <view class="content_fr"
          ><input
            type="text"
            v-model="receiveContact"
            placeholder="请输入装货人姓名"
        /></view>
      </view>
      <view class="content_key">
        <view class="content_fl">
          <text class="text">* </text>
          <text class="text1">手机号</text>
        </view>
        <view class="content_fr"
          ><input
            type="number"
            v-model="receiveTelphone"
            placeholder="请输入装货人手机号"
        /></view>
      </view>
      <view class="content_key">
        <view class="content_fl">
          <!-- <text class="text">* </text> -->
          <text class="text1">公司名称</text>
        </view>
        <view class="content_fr"
          ><input
            type="text"
            v-model="receiveCompany"
            placeholder="请输入公司名称"
        /></view>
      </view>
    </view>

    <!-- <view class="middle">
			<textarea placeholder="请粘贴或输入文本点击“识别”自动识别姓名、电话和地址"></textarea>
			<view>
				<image src="../../static/iocn13.png"></image>
				<text>识别</text>
			</view>
		</view> -->
    <view class="map">
      <map
        id="map_container"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        @tap="tap"
        enable-3D="false"
        show-compass="false"
        enable-overlooking="false"
        :enable-satellite="false"
        :enable-traffic="false"
        show-location="false"
        scale="12"
      />
    </view>

    <view class="footer" @click="funhuei()">确定</view>
  </view>
</template>

<script>
import { setValue, getValue } from "@/public/storeage/index.js";
import pickerAddress from "@/components/wangding-pickerAddress/wangding-pickerAddress.vue";
import amap from "@/libs/amap-wx.js";
export default {
  components: {
    pickerAddress,
  },
  data() {
    return {
      receiveZone: "请点击进行选择", //所在地区

      receiveAddress: "",
      receiveContact: "",
      receiveTelphone: "",
      receiveCompany: "",
      placeShip: "",
      amapPlugin: null,
      latitude: 39.899,
      longitude: 116.39742,
      key: "e9f1231c3e04f846432856dafa4e0a97",
      markers: [
        {
          id: 1, // Number
          title: "1", // String-标注点名
          latitude: 39.899,
          longitude: 116.39742,
          width: 30,
          height: 30,
          iconPath:
            "https://syh-2.oss-cn-shanghai.aliyuncs.com/icon_zhongdian.png", // 显示的图标
        },
      ],
    };
  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      key: this.key,
    });
  },

  methods: {
    getRegeo() {
      // 判断是否有地理授权信息
      uni.getSetting({
        success: (res) => {
          console.log("获取授权信息", res);
          var status = res.authSetting;
          if (!status["scope.userLocation"]) {
            // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
            uni.showModal({
              title: "是否授权当前位置",
              content:
                "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
              success: (tip) => {
                if (tip.confirm) {
                  uni.openSetting({
                    success: (data) => {
                      // 如果用户授权了地理信息在，则提示授权成功
                      if (data.authSetting["scope.userLocation"] === true) {
                        uni.showToast({
                          title: "授权成功",
                          icon: "success",
                          duration: 1000,
                        });
                        // 授权成功后，调用chooseLocation选择信息
                        uni.chooseLocation({
                          success: (res) => {
                            // 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
                            // console.log('详细地址', res)
                          },
                        });
                      } else {
                        uni.showToast({
                          title: "授权失败",
                          icon: "none",
                          duration: 1000,
                        });
                      }
                    },
                  });
                }
              },
            });
          } else {
            // 用户授权过，直接调用选择地址
            uni.chooseLocation({
              success: (res) => {
                // 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
                console.log("详细地址", res);
                this.receiveAddress = res.address;
                this.latitude = res.latitude;
                this.longitude = res.longitude;
                console.log("qwe", this.receiveAddress);
              },
            });
          }
        },
        fail: (res) => {
          uni.showToast({
            title: "调用授权窗口失败",
            icon: "none",
            duration: 1000,
          });
        },
      });
    },
    // 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
    tap(e) {
      console.log(e);
      var location = e.detail.longitude + "," + e.detail.latitude;
      amapPlugin.getRegeo({
        location: location,
        success: (data) => {
          console.log("获取指定定位信息", data);
          this.selectAddr = {
            address: data[0].regeocodeData.formatted_address,
            latitude: e.detail.latitude,
            longitude: e.detail.longitude,
          };
          this.markers[0].latitude = data[0].latitude;
          this.markers[0].longitude = data[0].longitude;
          amapPlugin.getPoiAround({
            location: data[0].longitude + "," + data[0].latitude,
            success: (data) => {
              console.log("获取当前的列表", data);
              this.dataTips = data.poisData;
            },
            fail: (info) => {
              console.log(info);
            },
          });
        },
        fail: (info) => {
          console.log(info);
        },
      });
    },

    change(data) {
      this.receiveZone = data.data.join("");
      this.placeReceive = data.data[0];
      console.log(this.placeReceive);
    },

    funhuei() {
      var receiveZone = this.receiveZone;
      var receiveAddress = this.receiveAddress;
      var receiveContact = this.receiveContact;
      var receiveTelphone = this.receiveTelphone;
      var receiveCompany = this.receiveCompany;
      var placeReceive = this.placeReceive;
      // if (receiveZone == '请点击进行选择') {
      // 	uni.showToast({
      // 		title: "省市区不能为空",
      // 		icon: 'none',
      // 		duration: 2000
      // 	})
      // 	return false
      // }
      if (receiveAddress == "") {
        uni.showToast({
          title: "详细地址不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (receiveContact == "") {
        uni.showToast({
          title: "卸货人不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (receiveTelphone == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      // if (receiveCompany == '') {
      // 	uni.showToast({
      // 		title: "公司名称不能为空",
      // 		icon: 'none',
      // 		duration: 2000
      // 	})
      // 	return false
      // }
      setValue("receiveZone", receiveZone);
      setValue("receiveAddress", receiveAddress);
      setValue("receiveContact", receiveContact);
      setValue("receiveTelphone", receiveTelphone);
      setValue("receiveCompany", receiveCompany);
      setValue("placeReceive", placeReceive);
      setValue("latitude1", this.latitude);
      setValue("longitude1", this.longitude);
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 15upx;
}
.map {
  position: fixed;
  top: 450upx;
  bottom: 0upx;
  left: 10upx;
  right: 0;
}

#map_container {
  width: 98%;
  height: 83%;
}

.content {
  width: 100%;
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
  background-color: #fff;
  padding: 0 20upx;
  .content_key {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 105upx;
    border-bottom: 1upx solid #e5e5e5;
    .content_fl {
      display: flex;
      align-items: center;
      text {
        font-size: 31upx;
        font-weight: bold;
        color: #000;
      }
      .text {
        color: #ef4d3d;
        margin-right: 10upx;
      }
      .text1 {
        width: 200upx;
      }
    }
    .content_fr {
      display: flex;
      align-items: center;
      image {
        width: 32upx;
        height: 32upx;
      }
      text {
        display: block;
        text-align: left;
        font-size: 28upx;
        width: 270upx;
      }
      input {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 28upx;
        text-align: left;
      }
    }
  }
}

.middle {
  width: 100%;
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
  padding: 30upx;
  margin-top: 20upx;
  textarea {
    width: 100%;
    height: 110upx;
  }
  view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20upx;
    image {
      width: 170upx;
      height: 47upx;
    }
    text {
      width: 96upx;
      height: 47upx;
      font-size: 28upx;
      text-align: center;
      line-height: 47upx;
      color: #fff;
      border-radius: 17upx;
      background: #ef4d3d;
    }
  }
}

.footer {
  width: 526upx;
  height: 71upx;
  opacity: 1;
  border-radius: 17upx;
  background: #ef4d3d;
  font-size: 31upx;
  font-weight: 500;
  text-align: center;
  line-height: 71upx;
  position: fixed;
  bottom: 60upx;
  left: 112upx;
  color: #fff;
  font-weight: bold;
}
</style>
